
<html>
	<title>e-Coordinate Translation Testbed</title>
<head>	
<script type="text/javascript" src="http://www.google.com/jsapi">
  
</script>
<style type="text/css">
	#sortable { list-style-type: none; margin: 0; padding: 0; width: 40%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	#sortable li span { position: absolute; margin-left: -1.3em; }
	</style>


<link type="text/css" href="/googly/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="/googly/jquery/js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="/googly/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript" src="/googly/jquery/js/jquery.corner.js"></script>

	<script type="text/javascript">
	$(function() {
		$("#TabGadget").tabs();
                $("#TabGadget").tabs({ fx: { opacity: 'toggle' } }); 
                $("#TabGadget").tabs('option', 'fx', { opacity: 'toggle' , duration: 'fast'}); 
		//$("#composeMsgGadget").corner('round 28px');
		$("#textMsgDatePicker").datepicker();
		$("#radiotab").tabs();
        $("#radiotab").tabs({ fx: { opacity: 'toggle' } }); 
        $("#radiotab").tabs('option', 'fx', { opacity: 'toggle' , duration: 'fast'});
		
              
	});
</script>


<script type="text/javascript">
     var map;
     var lTime = 0;
     var g_LangInit = false;

      google.load("language", "1");

    function loadMap() 
    {

      if (GBrowserIsCompatible()) 
      {
         map = new GMap2(document.getElementById("map"));
         map.setCenter(new GLatLng(22.7, 77.2), 5);
         //panToPlaceAndAddMarker(pLat,pLng,pPlaceName,pUserPhotoUrl)
        var center = new GLatLng(48.89364,  	2.33739);
        map.setCenter(center,5);
        map.setUIToDefault();
      
     }
    }


function
translateToArabia()
{
 var lAngliciaTxt = document.getElementById('anglicia').value;
 var translated = document.getElementById('arabia');

 translated.value = ""; 

 google.language.detect(lAngliciaTxt, function(result) {
        if (!result.error && result.language) {
          google.language.translate(lAngliciaTxt, result.language, "ar",
                                    function(result) {
            
	    if (result.translation) {
	      
              translated.value = result.translation;
            }
          });
        }
      });
 
}

function
translateToEnglish()
{
 var lArabiaTxt = document.getElementById('arabia-ar').value;
 var translated = document.getElementById('anglicia-ar');

 translated.value = ""; 

 google.language.detect(lArabiaTxt, function(result) {
        if (!result.error && result.language) {
          google.language.translate(lArabiaTxt, result.language, "en",
                                    function(result) {
            
	    if (result.translation) {
	          
              translated.value = result.translation;
            }
	    else
	    {
	    	 alert("Translation failed :-( ");
	    }
          });
        }
      });
 
}

var g_message = "text";
var g_textmsg_html = "";


function showTextMessageContainer()
{
	if(g_message == "text")
		{
		//do nothing
		}	
		else
			{
			  //alert("wll move to text");
	          g_message = "text";
	          document.getElementById('composeMsgGadget').innerHTML = g_textmsg_html;
	          alert(g_textmsg_html);
	          $("#textMsgDatePicker").datepicker('show');
	          
			}
	
}



function showVoiceMessageContainer()
{

	
	  lVoiceMsgBoxHtml = "<form>" 
          + "<table align=center>"
          + "<tr><th><font color=white>Voice Message Upload</font></th></tr>"
          + "<tr><td> <font color=white>Select a Voice message:</font></td><td><input type=file value=Select a Voice Recorded file></td></tr>"
          +"</table>"
          + "<div style='background-color: #ffffff;padding-top: 5px;padding-bottom: 5px;' ><input type=checkbox name=email value=e-mail><font color=brown>E-mail <input type=checkbox name=sms value=sms> SMS <input type=checkbox name=voice value=voice> Voice Calls  <input type=checkbox name=coordframe value=coordframe> CoordFrame.</font></div>"
          +"</form>";

	if(g_message == "voice")
		{
		}//do nothing
		else
			{
			 // alert("wll move to voice");
	          g_message = "voice";
	          g_textmsg_html = document.getElementById('composeMsgGadget').innerHTML;
	          document.getElementById('composeMsgGadget').innerHTML =  lVoiceMsgBoxHtml;
			}
	
	/*if(document.getElementById('voicemsg').checked == true )
		alert("VOICE MSG is alrady checked");
	else
		alert("Will change to VOICE MSG display");*/
   
     
    
     


}

</script>

</head>
<body onload="loadMap()" onunload="GUnload()">

    <div id="composeMsgContainer"  align="center" style="margin: 0 auto;width: 600px; height: 320px" >
	    <div id="composeMsgBanner" style="float: left;background-color: #f6a828;padding-top: 5px;padding-bottom: 5px;"><font color="white" size="3"><b>&nbsp; Compose Message  </b>&nbsp;</div>
	   <div style="clear:both;"></div>
       <div id="radiotab">
	   <ul>
	    <li><a href="#textMessageContainer"><font size=2>English to Arabic</font></a></li>
        <li><a href="#voiceMessageContainer"><span><font size=2>Arabic to English</font></span></a></li>
       </ul>	
	  
	   <div id="textMessageContainer">
	   		<table  bgclor="#f6a828" cellspacing=2 cellpadding=2>
				<tr><td><font size=2>English:</font></td></td></tr>
				<tr><td>
				<textarea id="anglicia" rows="3" cols="50"></textarea>
				</tr>
				<tr><td><font size=2>Arabic:</font></td></tr>
				<tr><td>
				<textarea id="arabia" rows="3" cols="50"></textarea>
				</td></tr>
				<tr><td colspan=2 ><input type=button value="Translate to Arabic" onClick="translateToArabia()">
				</td></tr>
				</table>
				</div>
	  <div id="voiceMessageContainer">
	  
	 
          <table  bgclor="#f6a828" cellspacing=2 cellpadding=2>
				<tr><td><font size=2>Arabic:</font></td></td></tr>
				<tr><td>
				<textarea id="arabia-ar" rows="3" cols="50"></textarea>
				</tr>
				<tr><td><font size=2>English:</font></td></tr>
				<tr><td>
				<textarea id="anglicia-ar" rows="3" cols="50"></textarea>
				</td></tr>
				<tr><td colspan=2 ><input type=button value="Translate to English" onClick="translateToEnglish()">
				</td></tr>
				</table>
         
          
   
	  </div>
	  
</div>
	


</body>

</html>


